Инструменты для оптимизации скорости загрузки сайта 2017
Первое впечатление о сайте складывается именно по скорости загрузки его страниц. Медленные сайты раздражают. Более того, они моментально формируют негативную картинку о сайте в голове пользователя.
Скорость загрузки очень важный параметр в оценке эффективности сайта. Каждая лишняя секунда при открытии интернет-страницы уменьшает число посетителей, подрывает доверие, лояльность и, как результат, снижает конверсию на 7%.
По данным исследований 1-секундная задержка во времени загрузки страницы приводит к уменьшению количества просмотров страниц на 11%, а показатель конверсии ухудшается на 7%. 74% пользователей уходят с мобильного сайта, который загружается дольше 5 секунд. Это особенно важно сегодня, когда все больше и больше посетителей на сайте используют мобильные устройства.
На скорость загрузки влияет очень много параметров: начиная от настроек сервера и заканчивая самим кодом сайта. А для того, чтобы повлиять на скорость загрузки сайта, ее нужно каким-то образом измерить и понять, как те или иные факторы влияют на скорость загрузки сайта.
В данном курсе мы детально изучим инструменты для оптимизации скорости загрузки сайта. Рассмотренные в курсе инструменты позволят увидеть те места, которые замедляют загрузку и работу сайта и получить рекомендации по их устранению.


Урок 1. Обзор сервиса webpagetest. Инструкция:
От автора: в данном вводном видео мы с вами подробно поговорим о настройках сервиса WebPageTest, дадим инструкции, которые необходимо произвести до начала теста скорости загрузки. Рассмотрим результаты, которые нам возвращает сервис по итогам теста скорости, выделим группы параметров в результатах теста и рассмотрим, что они отражают.
WebPageTest – это фундаментальный сервис, который оценивает загрузку страницы на всех этапах. Подобных сервисов много, но почти все они используют сервис Webpagetest в качестве основы. То есть из других сервисов и инструментов по оценке скорости загрузки вы получите те же данные и того же Webpagetest, но просто в другом виде, в другом дизайне.
Помимо стандартных оценок, сервис Webpagetest позволяет посмотреть на видео, как происходит загрузка страницы на различных скоростях, а также как загружаются страницы при первом и при последующих посещениях. Также можно выбрать место, в какой точке мира нужно проверить скорость загрузки и многое другое.


Урок 2. Параметры сервиса webpagetest. Часть 1:
От автора: в данном уроке мы подробно рассмотрим первую группу параметров в результате оценки скорости загрузки сервисом webpagetest. Я первую группу параметров называю «серверными параметрами», потому что за улучшения или ухудшение этих показателей отвечает именно сервер, на котором расположен сайт и его настройки.
Чтобы улучшить показатели, нужно понимать, что они измеряют и, как сервис их оценивает. В уроке мы рассмотрим систему, по которой webpagetest оценивает эти параметры и какие оценки выставляет, подробно рассмотрим оценку каждого параметра в отдельности и поговорим, на что она влияет. Так же в уроке поговорим о CDN. Рассмотрим что это такое, как CDN работает и как она может ускорить скорость загрузки страницы.


Урок 3. Параметры сервиса webpagetest. Часть 2:
От автора: в данном уроке мы продолжим подробно рассматривать параметры в результате оценки скорости загрузки сервисом webpagetest. И в уроке рассмотрим параметры, которые оценивают загрузку страницы. Оценку таких параметров всегда лучше производит в двух режимах: при первом посещении страницы и при повторном посещении.
В уроке мы подробно разберем все параметры загрузки. Поговорим о том, какие значения каждого из параметров являются идеальными, какие допустимыми, а какие значения нужно срочно улучшать. Более подробно остановимся на параметрах «время загрузки» и «время старта отрисовки страницы». Рассмотрим на примере, почему не так важна скорость полной загрузки, как время старта отрисовки страницы. Поговорим, что нужно делать при медленной загрузке страницы, чтобы по ощущениям она загружалась мгновенно.


Урок 4. Параметры сервиса webpagetest. Часть 3:
От автора: в предыдущем уроке мы с вами разобрали параметры загрузки страницы. Узнали, к каким значениям этих параметров нужно стремится. Но как понять, почему оценки получились именно такие и что нужно делать, чтобы их улучшить? Для этого сервис WebPageTest строит диаграмму загрузки страницы.
В данном уроке мы закончим рассматривать параметры в результате оценки скорости загрузки сервисом webpagetest. Рассмотрим детальную диаграмму загрузки страницы. Разбираться в данной диаграмме и понимать по какому принципу она строится очень важно. Данная диаграмма показывает, что, в какой последовательности и за какое время загружается. Это дает полное понимание процесса загрузки страницы и показывает все проблемные места на странице, которые тормозят ее загрузку.


Урок 5. Обзор сервиса PageSpeed от Google:
От автора: сервис PageSpeed от google проверяет и выдает оценки оптимизации для «десктопной» версии сайта отдельно и отдельно – для мобильной версии. Таким образом, сервис позволяет увидеть и понять, что быстрая загрузка страницы на настольном компьютере не означает такую же быструю загрузку на мобильных устройствах. Также сервис дает конкретные рекомендации по устранению проблем.
Кроме рекомендаций по устранению проблемных мест, сервис PageSpeed еще и выдает результат оптимизации, которые мы можем взять и использовать для собственной оптимизации. Тем самым сократим время на оптимизацию сайта.
Стоит отметить, что сегодня поисковики учитывают скорость загрузки сайтов при формировании поисковой выдачи и особенно учитывают ее при мобильной выдаче результатов поиска. Поэтому рекомендую серьезней отнестись к оценкам данного сервиса. Возможно, именно ее учитывает Google при ранжировании страниц.


Урок 6. Оптимизация изображений для сайта. Часть 1:
От автора: количество используемой на сайте графики с каждым годом становиться все больше и больше. На современных страницах используется очень много графики. Графика на сайте может занимать до 80% и даже до 90% от общего веса страницы. И при этом достаточно часто изображения либо не оптимизированы вообще, либо их можно оптимизировать еще лучше, что уменьшит общий вес страницы и соответственно повысит скорость загрузки.
Стандартные средства Photoshop дают очень мало возможностей по оптимизации изображений в формате png. И поэтому даже если изображения сохранять, используя «save for web», получаемое изображение можно еще больше оптимизировать и уменьшить его вес. В данном уроке мы поговорим об оптимизации изображений для сайта, а именно рассмотрим сервис, который позволяет это делать в пару кликов мыши.


Урок 7. Оптимизация изображений. Часть 2:
От автора: как мы отметили в прошлом уроке, Photoshop дает мало возможностей для оптимизации изображений в формате png. Для оптимизации изображений в формате jpg возможностей больше. Для них мы можем корректировать качество, тем самым влиять на размер файла картинки. И даже после этого мы можем еще больше оптимизировать изображения в формате jpg.
Есть сервисы, которые позволяют, казалось бы, оптимизированные изображения сжать еще больше без потери качества. В данном уроке мы с вами познакомимся с одним из таких сервисов, который, на мой взгляд, наиболее удобный и хорошо сжимает изображения.


Урок 8. Оптимизация CSS кода:
От автора: оптимизация css файлов может и должна происходить за счет объединения всех css файлов на странице в один. Но, как правило, полученный файл css будет иметь много лишнего кода, переносы строк, табуляции, комментарии и т.д. Код будет не оптимизирован, поэтому очень важно полученный объединенный файл оптимизировать.
В данном уроке мы рассмотрим сервис, который позволяет оптимизировать код css. Так же поговорим о том, что обязательно нужно сделать перед такой оптимизацией, чтобы избежать проблем в будущем.


Урок 9. Оптимизация JavaScript кода:
От автора: на современных страницах используется все больше и больше галерей, слайдеров, табов, аккордеонов и т.д. В итоге получается, что, как и в случае с изображениями, количество javascript кода на страницах становится все больше и больше. И его тоже нужно оптимизировать.
Оптимизация javascript кода похожа на оптимизацию css кода. Она должна происходить за счет объединения всех js файлов на странице в один. И далее полученный объединенный js файл нужно будет оптимизировать.
В данном уроке мы рассмотрим сервис, который позволяет оптимизировать код javascript. Так же поговорим о том, что обязательно нужно сделать перед такой оптимизацией, чтобы избежать проблем в будущем.